<template>
	<div @click="showFalse">
		<!-- xpert导航栏 -->
		<xpertNavBar :statusTab="statusTab" />
		<div style="height: 150px; width: 100%"></div>
		<!-- My list -->
		<div class="list m1280">My orders</div>
		<!-- btn -->
		<div class="btn m1280 f f-a-c f-j-b">
			<div class="lefBtn f f-a-c">
				<div :class="{ act: num == 1 }" @click="qieNum(1)" class="exp hand">All</div>
				<div :class="{ act: num == 2 }" @click="qieNum(2)" class="inter hand">Upcoming</div>
				<div :class="{ act: num == 3 }" @click="qieNum(3)" class="past hand">Past orders</div>
			</div>
		</div>
		<!-- yarn -->

		<!-- ALL第一个tabs -->
		<div v-if="num == 1">
			<div class="list m1280">
				<div v-for="(item, index) in orderList" :key="index" class="">
					<div style="margin-bottom: 10px" class="yarn m1280">{{ item.year }}</div>
					<div v-for="(ite, ind) in item.list" :key="ind" class="listItem f f-j-b">
						<div class="f">
							<div class="lefImg">
								<img :src="ite.sellerAvatar" alt="" />
							</div>
							<div class="cenTit">
								<div class="top">{{ ite.descriptionTitle }}</div>
								<div class="biao f f-a-c">
									{{ ite.sellerFirstName }} {{ ite.sellerLastName }} <span>{{ ite.sellerMyDescribe }}</span>
								</div>
								<div class="tabsIcon f f-a-c">
									<div class="oneIcon">
										<div class="thurs">{{ formatTimestamp(ite.startTime) }}</div>
										<div class="time">{{ timeHous(ite.startTime) }} - {{ timeHous(ite.endTime) }}</div>
									</div>
									<div class="oneIcon">
										<div class="thurs">Duration</div>
										<div class="time">{{ ite.timeInterval || 0 }}</div>
									</div>
									<div class="oneIcon">
										<div class="thurs">Cost</div>
										<div class="time">${{ ite.totalPrice }}</div>
									</div>
									<div class="oneIcon">
										<div class="thurs">Status</div>
										<div class="time">
											{{
												ite.status == 10 || ite.status == 20 || ite.status == 30 || ite.status == 40
													? "Upcoming"
													: (ite.status == 70 || ite.status == 60) && ite.reviewStatus
													? "reviewed"
													: ite.status == 70 || ite.status == 60
													? "completed"
													: ite.status == 40 || ite.status == 73 || ite.status == 76 || ite.status == 80
													? "cancel"
													: "pastorder"
											}}
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="rigBtn">
							<div v-if="ite.status == 10 || ite.status == 20 || ite.status == 30" class="add f f-a-c">
								<img src="/src/assets/jia.png" class="lefImg" alt="" />
								<div class="addTo">Add to google calander</div>
								<div class="rigImg">
									<img src="/src/assets/geng.png" @click.stop="qieShow(ite)" class="hand" alt="" />
									<div v-if="ite.show == true" @click.stop="clickQie(ite)" class="tanchu hand">Cancel order</div>
								</div>
							</div>
							<div class="btns f">
								<!-- 重新安排 -->
								<div v-if="ite.status == 10 || ite.status == 20 || ite.status == 30" @click="goReschedule(ite)" class="prices hand">Reschedule</div>
								<div v-if="ite.status == 20" @click="SetThePrice(ite, 1)" class="prices hand">Alter price</div>
								<div v-if="ite.status == 10" @click="SetThePrice(ite, 2)" class="prices hand">Set the price</div>
								<!-- <div @click="SetThePrice(ite, 1)" class="prices hand">Alter price</div>
								<div @click="SetThePrice(ite, 2)" class="prices hand">Set the price</div> -->
								<!-- 去支付 后来注释掉的卖家订单不需要支付============================================-->
								<!-- <div v-if="ite.status == 20" @click="payOrderList(ite)" class="prices hand">Pay</div> -->
								<!-- 看详情 -->
								<div @click="goViewDetails(ite, 1)" class="prices hand">View details</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="" v-else-if="num == 2">
			<div class="list m1280">
				<div v-for="(item, index) in orderList" :key="index" class="">
					<div style="margin-bottom: 10px" class="yarn m1280">{{ item.year }}</div>
					<div v-for="(ite, ind) in item.list" :key="ind" class="listItem f f-j-b">
						<div class="f">
							<div class="lefImg">
								<img :src="ite.sellerAvatar" alt="" />
							</div>
							<div class="cenTit">
								<div class="top">{{ ite.descriptionTitle }}</div>
								<div class="biao f f-a-c">
									{{ ite.sellerFirstName }} {{ ite.sellerLastName }} <span>{{ ite.sellerMyDescribe }}</span>
								</div>
								<div class="tabsIcon f f-a-c">
									<div class="oneIcon">
										<div class="thurs">{{ formatTimestamp(ite.startTime) }}</div>
										<div class="time">{{ timeHous(ite.startTime) }} - {{ timeHous(ite.endTime) }}</div>
									</div>
									<div class="oneIcon">
										<div class="thurs">Duration</div>
										<div class="time">{{ ite.timeInterval || 0 }}</div>
									</div>
									<div class="oneIcon">
										<div class="thurs">Cost</div>
										<div class="time">${{ ite.totalPrice }}</div>
									</div>
									<div class="oneIcon">
										<div class="thurs">Status</div>
										<div class="time">
											{{
												ite.status == 10 || ite.status == 20 || ite.status == 30 || ite.status == 40
													? "Upcoming"
													: (ite.status == 70 || ite.status == 60) && ite.reviewStatus
													? "reviewed"
													: ite.status == 70 || ite.status == 60
													? "completed"
													: ite.status == 40 || ite.status == 73 || ite.status == 76 || ite.status == 80
													? "cancel"
													: "pastorder"
											}}
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="rigBtn">
							<div v-if="ite.status == 10 || ite.status == 20 || ite.status == 30" class="add f f-a-c">
								<img src="/src/assets/jia.png" class="lefImg" alt="" />
								<div class="addTo">Add to google calander</div>
								<div class="rigImg">
									<img src="/src/assets/geng.png" @click.stop="qieShow(ite)" class="hand" alt="" />
									<div v-if="item.show == true" @click.stop="clickQie(ite)" class="tanchu hand">Cancel order</div>
								</div>
							</div>
							<div class="btns f">
								<!-- 重新安排 -->
								<div v-if="ite.status == 10 || ite.status == 20 || ite.status == 30" @click="goReschedule(ite)" class="prices hand">Reschedule</div>
								<div v-if="ite.status == 20" @click="SetThePrice(ite, 1)" class="prices hand">Alter price</div>
								<div v-if="ite.status == 10" @click="SetThePrice(ite, 2)" class="prices hand">Set the price</div>
								<!-- <div @click="SetThePrice(ite, 1)" class="prices hand">Alter price</div>
								<div @click="SetThePrice(ite, 2)" class="prices hand">Set the price</div> -->
								<!-- 去支付 -->
								<div v-if="ite.status == 20" @click="payOrderList(ite)" class="prices hand">Pay</div>
								<!-- 看详情 -->
								<div @click="goViewDetails(ite, 2)" class="prices hand">View details</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="" v-else-if="num == 3">
			<div class="list m1280">
				<div v-for="(item, index) in orderList" :key="index" class="">
					<div style="margin-bottom: 10px" class="yarn m1280">{{ item.year }}</div>
					<div v-for="(ite, ind) in item.list" :key="ind" class="listItem f f-j-b">
						<div class="f">
							<div class="lefImg">
								<img :src="ite.sellerAvatar" alt="" />
							</div>
							<div class="cenTit">
								<div class="top">{{ ite.descriptionTitle }}</div>
								<div class="biao f f-a-c">
									{{ ite.sellerFirstName }} {{ ite.sellerLastName }} <span>{{ ite.sellerMyDescribe }}</span>
								</div>
								<div class="tabsIcon f f-a-c">
									<div class="oneIcon">
										<div class="thurs">{{ formatTimestamp(ite.startTime) }}</div>
										<div class="time">{{ timeHous(ite.startTime) }} - {{ timeHous(ite.endTime) }}</div>
									</div>
									<div class="oneIcon">
										<div class="thurs">Duration</div>
										<div class="time">{{ ite.timeInterval || 0 }}</div>
									</div>
									<div class="oneIcon">
										<div class="thurs">Cost</div>
										<div class="time">${{ ite.totalPrice }}</div>
									</div>
									<div class="oneIcon">
										<div class="thurs">Status</div>
										<div class="time">
											{{
												ite.status == 10 || ite.status == 20 || ite.status == 30 || ite.status == 40
													? "Upcoming"
													: (ite.status == 70 || ite.status == 60) && ite.reviewStatus
													? "reviewed"
													: ite.status == 70 || ite.status == 60
													? "completed"
													: ite.status == 40 || ite.status == 73 || ite.status == 76 || ite.status == 80
													? "cancel"
													: "pastorder"
											}}
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="rigBtn">
							<!-- <div v-if="ite.status == 10 || ite.status == 20 || ite.status == 30" class="add f f-a-c">
								<img src="/src/assets/jia.png" class="lefImg" alt="" />
								<div class="addTo">Add to google calander</div>
								<div class="rigImg">
									<img src="/src/assets/geng.png" @click.stop="qieShow(item)" class="hand" alt="" />
									<div v-if="item.show == true" @click.stop="clickQie(item)" class="tanchu hand">Cancel order</div>
								</div>
							</div> -->
							<div class="btns f">
								<!-- 重新安排 -->
								<div v-if="ite.status == 10 || ite.status == 20 || ite.status == 30" @click="goReschedule(ite)" class="prices hand">Reschedule</div>
								<div v-if="ite.status == 20" @click="SetThePrice(ite, 1)" class="prices hand">Alter price</div>
								<div v-if="ite.status == 10" @click="SetThePrice(ite, 2)" class="prices hand">Set the price</div>
								<!-- <div @click="SetThePrice(ite, 1)" class="prices hand">Alter price</div>
								<div @click="SetThePrice(ite, 2)" class="prices hand">Set the price</div> -->
								<!-- 去支付 -->
								<!-- <div v-if="ite.status == 20" @click="payOrderList(ite)" class="prices hand">Pay</div> -->
								<!-- 看详情 -->
								<div @click="goViewDetails(ite, 3)" class="prices hand">View details</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div style="margin-top: 60px; margin-bottom: 80px" class="hand">
			<div class="example-pagination-block f f -a-c f-j-c">
				<el-pagination :default-page-size="5" @size-change="sizeChange" @current-change="currentChange" layout="prev, pager, next" :total="total" />
			</div>
		</div>
		<!-- 删除 -->
		<el-dialog v-model="listVisibleDet" title="" width="400">
			<div class="dialogTitleDelete">Cancel order？</div>
			<div class="dialogTitCount">Cancellation will affect your overall rating, are you sure you want to do this?</div>
			<div class="dialogBtn f f-a-c f-j-b">
				<div @click="cancelOrder" class="lefBtn hand">YES</div>
				<div @click="listVisibleDet = false" class="rigBtn hand">NO</div>
			</div>
		</el-dialog>
		<!-- Alter price -->
		<el-dialog v-model="listVisiblePrice" title="" width="540">
			<div class="dialogTitleDeletePrice">Set the price</div>
			<div class="pricing f f-a-c">Pricing <span>*</span> <img src="/src/assets/user/7.png" class="wen" alt="" /></div>
			<div class="inpBox f f-a-c f-j-b">
				<div class="pic f f-a-c f-j-b">
					$
					<input type="text" v-model="priceValue" class="doingInp" name="" id="" />
				</div>
				<div class="times">/ 30mins</div>
			</div>
			<div class="dolinBtnBox f f-a-c hand"><div @click="SubmitAlterSetting" class="submit">Submit</div></div>
		</el-dialog>
		<el-dialog v-model="listVisiblePriceGai" title="" width="540">
			<div class="dialogTitleDeletePrice">Alter price</div>
			<div class="pricing f f-a-c">Pricing <span>*</span> <img src="/src/assets/user/7.png" class="wen" alt="" /></div>
			<div class="inpBox f f-a-c f-j-b">
				<div class="pic f f-a-c f-j-b">
					$
					<input type="text" v-model="priceValueAlter" class="doingInp" name="" id="" />
				</div>
				<div class="times">/ 30mins</div>
			</div>
			<div class="dolinBtnBox f f-a-c hand"><div @click="SubmitAlter" class="submit">Submit</div></div>
		</el-dialog>
		<xpertTabbar />
	</div>
</template>
<script setup>
	import { ref, onMounted } from "vue";
	import { formatTimestamp, timeHous } from "@/utils/setting.js";
	import { ElMessage } from "element-plus";
	import { MyListList, CancelAnOrder, PayOrder, ModifyOrderPrice } from "@/api/xpert.js";
	import xpertTabbar from "@/components/tabBar/xpertTabbar.vue";
	import xpertNavBar from "@/components/navBar/xpertNavBar.vue";
	import router from "@/router/index.js";
	import ButtonDiffuse from "@/components/Button/ButtonDiffuse.vue";
	let statusTab = ref(1);
	let pageNum = ref(1);
	let pageSize = ref(5);
	let total = ref(0);
	let itemObj = ref({});
	let status1 = ref("");
	let status2 = ref("");
	let status3 = ref("");
	let status4 = ref("");
	let status5 = ref("");
	let status6 = ref("");
	let status7 = ref("");
	let status8 = ref("");
	let status9 = ref("");
	let status10 = ref("");
	let priceObj = ref({});
	let status11 = ref("");
	let listVisibleDet = ref(false);
	let priceValue = ref("");
	let priceValueAlter = ref("");
	let orderList = ref([]);
	let listVisiblePrice = ref(false);
	let listVisiblePriceGai = ref(false);
	let num = ref(1);
	let newList = ref([]);
	let list = ref([
		{
			show: false
		},
		{
			show: false
		},
		{
			show: false
		},
		{
			show: false
		},
		{
			show: false
		}
	]);
	onMounted(() => {
		myOrderList();
		window.addEventListener("scroll", handleScroll);
	});
	const myOrderList = async () => {
		let n = await MyListList({
			type: "",
			pageNum: pageNum.value,
			pageSize: pageSize.value,
			status1: status1.value,
			status2: status2.value,
			status3: status3.value,
			status4: status4.value,
			status5: status5.value,
			status6: status6.value,
			status7: status7.value,
			status8: status8.value,
			status9: status9.value,
			status10: status10.value,
			status11: status11.value
		});
		total.value = n.data.total;
		// orderList.value = n.data.list;
		n.data.list.forEach(item => {
			item.show = false;
		});
		let m = settingFn(n.data.list);
		orderList.value = m;
	};
	const SetThePrice = (item, num) => {
		priceObj.value = item;
		if (num == 1) {
			// 改动价格
			listVisiblePriceGai.value = true;
		} else if (num == 2) {
			// 设置价格
			listVisiblePrice.value = true;
		}
	};
	// 修改价格
	const SubmitAlter = async () => {
		let n = await ModifyOrderPrice({
			orderId: priceObj.value.id,
			price: priceValueAlter.value
		});
		if (n.code == 200) {
			ElMessage.success(n.message);
			listVisiblePriceGai.value = false;
			listVisiblePrice.value = false;
			myOrderList();
		}
	};
	// 设置价格
	const SubmitAlterSetting = async () => {
		let n = await ModifyOrderPrice({
			orderId: priceObj.value.id,
			price: priceValue.value
		});
		if (n.code == 200) {
			ElMessage.success(n.message);
			listVisiblePriceGai.value = false;
			listVisiblePrice.value = false;
			myOrderList();
		}
	};
	// 点击删除
	const cancelOrder = async () => {
		let n = await CancelAnOrder({
			orderId: itemObj.value.id
		});
		if (n.code == 200) {
			listVisibleDet.value = false;
			myOrderList();
		}
	};
	// 支付订单
	const payOrderList = async item => {
		let n = await PayOrder({
			orderId: item.id
		});
		// window.location.href = n.data;
		window.open(n.data);
	};
	// 处理年份
	const settingFn = data => {
		const result = data.reduce((acc, obj) => {
			const date = new Date(obj.createTime);
			const year = date.getFullYear().toString();
			const existingYear = acc.find(item => item.year === year);
			if (existingYear) {
				existingYear.list.push(obj);
			} else {
				acc.push({ year: year, list: [obj] });
			}
			console.log(acc, "111111111111111111111111111");
			return acc;
		}, []);
		return result;
	};

	// 切换
	const qieNum = item => {
		num.value = item;
		pageNum.value = 1;
		orderList.value = [];
		status1.value = 0;
		status2.value = 0;
		status3.value = 0;
		status4.value = 0;
		status5.value = 0;
		status6.value = 0;
		if (item == 2) {
			//表示Upcoming
			status1.value = 10;
			status2.value = 20;
			status3.value = 30;
			status4.value = 50;
			myOrderList();
		} else if (item == 3) {
			//表示Upcoming
			status1.value = 60;
			status2.value = 70;
			status3.value = 40;
			status4.value = 73;
			status5.value = 76;
			status6.value = 80;
			myOrderList();
		} else {
			myOrderList();
		}
	};
	const showFalse = () => {
		list.value.forEach(item => {
			item.show = false;
		});
	};
	// 点击变为true
	const qieShow = item => {
		console.log(item, "1212112");
		item.show = !item.show;
	};
	const clickQie = item => {
		// console.log(item, "55555555555");
		// return;
		itemObj.value = item;
		item.show = !item.show;
		listVisibleDet.value = true;
	};
	// 切换分页
	const sizeChange = e => {
		console.log(e, "1111111");
	};
	// 切换分页
	const currentChange = e => {
		pageNum.value = e;
		myOrderList();
	};
	// 去选择时间页面===============================================
	// 修改时间
	const goReschedule = e => {
		// console.log(e, "444444444444444");
		// return;
		// UseCustomizeOrderTime
		router.push({
			path: "/UseCustomizeOrderTime",
			query: {
				act: 3,
				userId: e.sellerUserId,
				descriptionTitle: e.descriptionTitle,
				descriptionDetail: e.descriptionDetail,
				meetingType: e.meetingType,
				orderId: e.id
			}
		});
	};
	// 去订单详情
	const goViewDetails = (item, ind = 1) => {
		router.push({
			path: "/MyOrder/MyOrderDetails",
			query: {
				id: item.id,
				num: ind
				// act: 3
			}
		});
	};

	const alterPrice = item => {
		listVisiblePrice.value = true;
	};
	// 这个是当头部导航栏滑倒下面时给tabr加个背景
	const handleScroll = () => {
		const scrollTop = document.documentElement.scrollTop;
		if (scrollTop > 0) {
			statusTab.value = 2;
		} else {
			statusTab.value = 1;
		}
	};
</script>
<style scoped>
	@import "./index.scss";
</style>
